import React, { memo } from 'react'
import { NavLink } from 'react-router-dom'
import { Input } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import { headerLinks } from '@/common/local-data'
import {
  HeaderWrap
} from './style'

export default memo(function AppHeader() {


  const renderSelectItem = () => {
    return headerLinks.map((i, idx) => {
      if (idx < 3) {
        return (
          <NavLink className="select-item" to={i.link} key={i.title}>
            {i.title}
            <i className="sprite_01 icon" />
          </NavLink>
        )
      } else {
        return (
          <a href={i.link} className="select-item" key={i.title}>
            {i.title}
            {idx === 5 && <i className="sprite_01 hot" />}
          </a>
        )
      }
    })
  }

  return (
    <HeaderWrap>
      <div className="content">
        <div className="wrap wrap-v1">
          <div className="left">
            <div className="select">
              <a href="/" className="logo sprite_01">网易云音乐</a>
              {renderSelectItem()}
            </div>

          </div>
          <div className="right">
            <Input prefix={<SearchOutlined />} placeholder="音乐/视频/电台/用户" className="search" />
            <div className="center">创作者中心</div>
            <div className="login">登录</div>
          </div>
        </div>
      </div>
      <div className="divider" />
    </HeaderWrap>
  )
})
